﻿@layout("/common/_vue_container.html"){
<div id="app" v-cloak v-loading="fullscreenLoading" style="height:100%;">
	<div class="main_content">
		<div v-loading="screenLoading">
			<div class="remind_title2">
				广告图列表
				<el-button
						type="primary"
						size="small"
						class="product-new-button"
						v-on:click="toNewPage"
				>
					新增
				</el-button>
				<el-button
						type="primary"
						size="small"
						class="product-new-button"
						v-on:click="toCateList"
				>
					类别管理
				</el-button>
			</div>
			<el-form :inline="true" :model="queryContent" class="product-form-inline" size="mini">
				<span style="margin-right: 6px;font-size: 14px;color: #606266;">类别选择</span>
				<el-select v-model="queryContent.cateId" clearable placeholder="请选择" size="mini">
					<el-option
							v-for="item in cateList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
					</el-option>
				</el-select>
				<el-form-item label="关键词" size="mini">
					<el-input v-model="queryContent.keyword" placeholder="产品名称" size="mini"></el-input>
				</el-form-item>
				<el-form-item size="mini">
					<el-button type="primary" v-on:click="loadAdList" size="mini">查询</el-button>
					<el-button v-on:click="resetQuery" size="mini">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table ref="singleTable" :data="adData" style="width: 100%">
				<el-table-column type="index" width="60" property="index">
				</el-table-column>
				<el-table-column property="id" label="id"></el-table-column>
				<el-table-column property="productName" label="产品名称">
				</el-table-column>
				<el-table-column property="cateName" label="广告分类">
				</el-table-column>
				<el-table-column property="adImgUrl" label="图片">
					<template scope="scope">
						<img  :src="scope.row.adImgUrl+'?imageView2/1/w/60/h/60'" v-on:click="previewAdImg(scope.row.adImgUrl)">
						<el-dialog :visible.sync="dialogVisible">
							<img width="100%" :src="dialogImageUrl" alt="图片丢失">
						</el-dialog>
					</template>
				</el-table-column>
				<el-table-column property="isUsed" label="状态" sortable>
					<template scope="scope">
						<div v-if="scope.row.isUsed==='1'"><i class="limit_pass"></i>启用</div>
						<div v-if="scope.row.isUsed==='0'"><i class="limit_fail"></i>禁用</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template scope="scope">
						<el-button size="small"
								   v-on:click=toEditPage(scope.row.id)>编辑
						</el-button>
						<el-button v-if="scope.row.isUsed==='1'" size="small"
								   v-on:click=changeStatus(scope.row.id,scope.row.isUsed)>禁用
						</el-button>
						<el-button v-if="scope.row.isUsed==='0'" size="small"
								   v-on:click=changeStatus(scope.row.id,scope.row.isUsed)>启用
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template>
				<el-pagination
						background
						v-on:current-change="handleCurrentChange"
						:current-page.sync="pageNo"
						:page-size="pageSize"
						layout="total, prev, pager, next"
						:total="total">
				</el-pagination>
			</template>
		</div>
	</div>
	<el-dialog title="改变状态" :visible.sync="dialogFormVisible">
		<div v-if="isUsed == 1" class="user-status-dialog-text">
			确定禁用该广告？
		</div>
		<div v-else="isUsed == 1" class="user-status-dialog-text">
			确定启用该广告？
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button v-on:click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" v-on:click="confirmChange()">确 定</el-button>
		</div>
	</el-dialog>
</div>
<script src="${ctxPath}/static/modular/cash/ad/picture_list.js"></script>
@}

